import React, { Component, PropTypes } from 'react';
import { Row, Col } from 'antd';
import { connect } from 'react-redux';
import moment from 'moment';
import Summary from './Summary';
import OpenPositions from './OpenPositions';
import AccountChart from './AccountChart';

import './accountAssets.less';

const mapStateToProps = ({
  retailFeatureList: { currentDataDate, selectedTrader },
  retailAccountAssets: { accountDaily, openPositionList },
}) => ({
  trader: selectedTrader.trader,
  dataDate: moment(currentDataDate).format('YYYY-MM-DD'),
  account: accountDaily,
  openPositionList,
});

const mapDispatchToProps = {
  getAccountDaily: query => ({
    type: 'retailAccountAssets/getAccountDaily',
    payload: query || {},
  }),
  getOpenPositionList: query => ({
    type: 'retailAccountAssets/getOpenPositionList',
    payload: query || {},
  }),
};

@connect(mapStateToProps, mapDispatchToProps)
class AccountAssets extends Component {
  static propTypes = {
    trader: PropTypes.string.isRequired,
    dataDate: PropTypes.string.isRequired,
  }
  static defaultProps = {

  }
  componentDidMount() {
    this.getData(this.props);
  }
  componentWillReceiveProps(nextProps) {
    if (nextProps.trader !== this.props.trader) {
      this.getData(nextProps);
    }
  }
  getData({ trader, dataDate, getAccountDaily, getOpenPositionList }) {
    getOpenPositionList({ trader });
    getAccountDaily({ trader, dataDate });
  }
  render() {
    const { account, openPositionList } = this.props;
    return (
      <div className="accountAssets" style={{ padding: '20px 12px' }}>
        <Row>
          <Col span="12">
            { account && <Summary account={account} /> }
            <OpenPositions list={openPositionList} />
          </Col>
          <Col span="12">
            <AccountChart data={openPositionList} />
          </Col>
        </Row>
      </div>
    );
  }
}

export default AccountAssets;
